import React, { useState } from "react";
import { LoadingOutlined, PlusOutlined, RightOutlined } from '@ant-design/icons';
import { Layout, theme, Flex, message, Upload } from 'antd';
const { Header, Content, Sider } = Layout;
import type { GetProp, UploadProps } from 'antd';
import Headers from "@/components/Headers";
import Siders from "@/components/Siders";
import Main from "@/components/Main";
import Tap from "@/components/Tap";
import Swiper from "@/components/Swiper";
import Roll from "@/components/roll/Roll";


type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
const getBase64 = (img: FileType, callback: (url: string) => void) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
};

const beforeUpload = (file: FileType) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};

const list = [
  {
    id:1,
    img: "src/img/img16.webp",
    title: "SINCERE INVITATION 邀请函",
  },
  {
    id:2,
    img: "src/img/img17.webp",
    title: "某国际会展中心 邀请函",
  },
  {
    id:3,
    img: "src/img/img18.webp",
    title: "2028第三届互联网IT论坛峰会",
  },
]




function Home() {
  const {
    token: { borderRadiusLG },
  } = theme.useToken();
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>();

  const handleChange: UploadProps['onChange'] = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj as FileType, (url) => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };

  const uploadButton = (
    <button style={{ border: 0, background: 'none' }} type="button">
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </button>
  );
  return (
    <Layout>
      <Header style={{
        background: "#fff", width: "100vw", height: "60px", borderBottom: "1px solid #cccccca0",
        position: "sticky", top: "0", left: "0", zIndex: 999
      }}>
        <Headers></Headers>
      </Header>
      <Content style={{ padding: '10px 40px 0 0' }}>
        <Layout
          style={{ padding: '20px 20px 0 10px ', borderRadius: borderRadiusLG }}
        >
          <Sider>
            <Siders></Siders>
          </Sider>
          <Content style={{ margin: '0 0 0 80px ' }}>
            <div className="mainA">
              <Main></Main>
              <Swiper></Swiper>
              <Tap></Tap>
              <div className="box">
                <div className="box_left">
                  <div className="boxLTop">
                    <p>
                      <span style={{ fontSize: "15px", fontWeight: "800" }}>今日推荐</span>
                      <span style={{ fontSize: "8px", marginLeft: "10px", color: "rgb(234, 198, 102)" }}>开通会员免费使用</span>
                    </p>
                  </div>
                  <div className="boxLMan" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Flex gap="middle">
                      <Upload
                        name="avatar"
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
                        beforeUpload={beforeUpload}
                        onChange={handleChange}
                      >
                        {imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
                      </Upload>
                    </Flex>
                  </div>
                  <div className="boxLBom">
                    <img src="src/img/yx.webp" alt="" />
                  </div>
                </div>
                <div className="box_right">
                  <div className="boxRTop">
                    <p>
                      <span>精选推荐</span>
                      <span>热点关注</span>
                      <span>儿童节</span>
                      <span>高考加油</span>
                      <span>端午节</span>
                      <span>618</span>
                      <span>父亲节</span>
                    </p>
                    <p>
                      <b>查看更多 {">"}</b>
                    </p>
                  </div>
                  <div className="boxRMan">
                   
                    
                    {/* 公共组件 */}
                    <Roll list={list}></Roll>

                  </div>
                </div>
              </div>
              {/* 广告 */}
              <img src="src/img/111.jpg" alt="" style={{ borderRadius: "10px", margin: "20px 0" }} />

              <div className="box1">
                <div className="box1_top" style={{position:"relative"}}>
                  <p>
                    <b style={{ fontSize: "15px" }}>邀请函·高端会议必备</b>
                  </p>
                  <p>
                    <span>商务会议</span>
                    <span>新品发布</span>
                    <span>开业邀请</span>
                    <span>招商投资</span>
                    <span>婚礼邀请</span>
                    <span>展会邀请</span>
                    <span>邀请长图</span>
                    <span>朋友圈海报</span>
                  </p>
                  <p>
                    <b style={{ fontStyle: "normal",position:"absolute",right:"0",color:"#606060" }}>查看更多 {">"}</b>
                  </p>
                </div>

                <div className="box1_bom">

                </div>
              </div>

            </div>
          </Content>
        </Layout>
      </Content>

    </Layout>

  )
}
export default Home